<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>歌曲管理</el-breadcrumb-item>
      <el-breadcrumb-item>歌曲列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--搜索区域-->
      <el-row>
        <el-col :span="6">
          <el-input placeholder="请输入内容" v-model="queryinfo.query" clearable @keydown.enter.native="getSong"
                    class="input-with-select" @clear="getSong">
            <el-button slot="append" icon="el-icon-search" @click="getSong"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <router-link to="addsong" tag="span"><el-button type="primary">新增歌曲</el-button></router-link>
        </el-col>
      </el-row>
      <!--显示区域-->
      <el-row>
        <el-table :data="songs" border style="width: 100%" stripe @expand-change="expandto"
                   :row-key="getRowKeys" :expand-row-keys="expands">
          <el-table-column type="expand" width="60px">
            <template slot-scope="props">
              <el-row>
                <el-col :span="6">
                  <img style="height: 150px;" :src="props.row.fileType">
                </el-col>
                <el-col :span="6">
                  <p class="song-name">歌曲名称：{{props.row.name}}</p>
                </el-col>
              </el-row>
              <el-row class="song-row">
                <el-col :span="6">
                  <span>歌曲评分：{{props.row.grade}}</span>
                </el-col>
                <el-col :span="6">
                  <span>歌曲热度：{{props.row.hot}}</span>
                </el-col>
              </el-row>
              <el-row class="song-row">
                所属专辑：{{special.name}}
              </el-row>
              <el-row class="song-row">
                歌手：<el-tag class="song-tag" color="#FFFFCC" v-for="(item, index) in singers" :key="index">{{item.name}}</el-tag>
              </el-row>
              <el-row class="song-row">
                歌曲类别：
                <el-tag class="song-tag" :type="item.parentId === 0 ? 'waring' : 'success'" v-for="(item, index) in songTypes" :key="index">
                  {{item.name}}
                </el-tag>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="歌曲名称"></el-table-column>
          <el-table-column prop="grade" label="歌曲评分"></el-table-column>
          <el-table-column prop="hot" label="歌曲热度"></el-table-column>
          <el-table-column label="图片" width="100">
            <template slot-scope="props">
            <el-upload class="upload-demo" :action="upImgURL"
                       :show-file-list="false" :on-success="uploadSuccess">
              <el-button size="small" plain :type="props.row.fileType !== '' ? 'success' : 'primary'" @click="updateImg.id = props.row.id">
                {{props.row.fileType !== '' ? '修改图片' : '上传图片'}}
              </el-button>
            </el-upload>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="285">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="editSong(scope.row.id)">修改歌曲</el-button>
              <el-button size="mini" type="warning" @click="editSongSinger(scope.row.id)">修改歌手</el-button>
              <el-button size="mini" type="danger" @click="deleteSong(scope.row.id)">删除歌曲</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!--分页区域-->
      <el-row>
        <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange"
                       :total="total">
        </el-pagination>
      </el-row>
    </el-card>

    <!--修改歌曲-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-row v-if="buttonChage === 1">
      <el-form ref="editSongRef" :model="editsong" label-width="80px">
        <el-form-item label="歌曲名称">
          <el-input v-model="editsong.name"></el-input>
        </el-form-item>
        <el-form-item label="所属专辑">
          <el-select v-model="editsong.parentId" placeholder="请选择活动区域" style="width: 100%;">
            <el-option v-for="item in specials" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="歌曲评分">
          <el-input-number style="width: 100%;" v-model="editsong.grade" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="歌曲热度">
          <el-input-number style="width: 100%;" v-model="editsong.hot" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="歌词">
          <el-input type="textarea" v-model="editsong.libretto" placeholder="使用中文，分隔"></el-input>
        </el-form-item>
      </el-form>
      <el-tree :data="types" :props="props" node-key="id" :default-checked-keys="defaultTypes"
               show-checkbox @check="checkChange">
      </el-tree>
      </el-row>
      <el-row v-else>
        <el-transfer style="text-align: left; display: inline-block"
                     v-model="pitchSinger" :data="allSinger" :titles="['待选歌手', '已选歌手']">
        </el-transfer>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSong">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      upImgURL: 'http://localhost:9000/api/upload/file',
      queryinfo: {
        page: 1,
        size: 10,
        query: '',
        album: 0
      },
      songs: [],
      total: -1,
      songTypes: [],
      singers: [],
      getRowKeys (row) {
        return row.id
      },
      expands: [],
      special: {},
      // 歌曲图片
      updateImg: {
        id: null,
        fileType: null
      },
      // 修改的歌曲对象
      editsong: {},
      // dialog控制器
      dialogVisible: false,
      // 专辑列表
      specials: [],
      // 所以类型
      types: [],
      // 默认选中的类型
      defaultTypes: [],
      // 选中的类型
      checkTypes: [],
      props: {
        label: 'name',
        children: 'child'
      },
      edid: -1,
      // 切换dialog样式 1 为修改歌曲， -1为修改歌手
      buttonChage: 0,
      // dialog标题
      dialogTitle: '修改歌曲信息',
      // 所有歌手
      allSinger: [],
      pitchSinger: []
    }
  },
  methods: {
    // 修改歌手
    editSongSinger (id) {
      this.allSinger = []
      this.pitchSinger = []
      this.dialogTitle = '修改歌曲歌手'
      this.buttonChage = -1
      this.edid = id
      this.$http.get('singer').then(res => {
        res.data.data.forEach(item => {
          this.allSinger.push({
            label: item.name,
            key: item.id
          })
        })
      })
      // this.$http.get(`singer/song/${this.edid}`).then(res => {
      //   res.data.data.forEach(item => {
      //     this.pithSinger.push(item.id)
      //   })
      // })
      this.dialogVisible = true
    },
    // 修改歌曲
    updateSong () {
      if (this.buttonChage === 1) {
        this.$http.put(`song/${this.edid}`, this.editsong).then(res => {
          if (res.data.code === 10000) {
            this.checkTypes = this.checkTypes.map(Number)
            this.$http.put(`type/song/${this.edid}`, this.checkTypes).then(res => {
              this.hite(res.data.code)
            })
            this.dialogVisible = false
            this.getSong()
            this.editsong = {}
          }
        })
      } else if (this.buttonChage === -1) {
        if (this.pitchSinger.length > 0) {
          this.pitchSinger = this.pitchSinger.map(Number)
          this.$http.put(`singer/song/${this.edid}`, this.pitchSinger).then(res => {
            this.hite(res.data.code)
            this.dialogVisible = false
          })
        }
      }
    },
    // 类型发生改变
    checkChange (node, data) {
      this.checkTypes = []
      this.checkTypes = [...data.checkedKeys, ...data.halfCheckedKeys]
      console.log(this.checkTypes)
    },
    // 点击修改歌曲按钮
    editSong (id) {
      this.dialogTitle = '修改歌曲信息'
      this.buttonChage = 1
      this.edid = id
      this.$http.get(`song/${id}`).then(res => {
        if (res.data.code === 10000) {
          this.editsong = res.data.data
        }
        // 查询所有专辑
        this.$http.get('song/special').then(res => {
          this.specials = res.data.data
          console.log(this.specials)
        })
        // 查询所有类型
        this.$http.get('type').then(res => {
          this.types = res.data.data
        })
        // 查询已有类型
        this.$http.get(`type/song/${id}`).then(res => {
          res.data.data.forEach(item => {
            if (item.parentId > 0) this.defaultTypes.push(Number.parseInt(item.id))
          })
          this.dialogVisible = true
        })
      })
    },
    // 文件上传成功的钩子
    uploadSuccess (response) {
      this.updateImg.fileType = response.url
      this.$http.put(`song/${this.updateImg.id}`, this.updateImg).then(res => {
        if (res.data.code === 10000) {
          this.$message.success({
            message: '图片上传成功',
            duration: 1000
          })
          this.updateImg = {id: null, fileType: null}
          this.getSong()
        }
      })
    },
    // 展开行
    expandto (row, expandedRows) {
      this.songTypes = []
      this.singers = []
      this.special = {}
      if (expandedRows.length) {
        this.expands = []
        if (row) {
          this.expands.push(row.id)
          this.getSongTypes(row.id)
          this.getSongSingers(row.id)
          this.getSongSpecial(row.parentId)
        }
      }
      else {
        this.expands = []
      }
    },
    // 根据id获取专辑
    getSongSpecial (id) {
      this.$http.get(`song/${id}`).then(res => {
        this.special = res.data.data
        console.log(this.special)
      })
    },
    // 根据id获取歌手
    getSongSingers (id) {
      this.$http.get(`singer/song/${id}`).then(res => {
        this.singers = res.data.data
      })
    },
    // 根据id获取歌曲类型
    getSongTypes (id) {
      this.$http.get(`type/song/${id}`).then(res => {
        this.songTypes = res.data.data
      })
    },
    // 页码改变
    handleCurrentChange (val) {
      this.queryinfo.page = val
      this.getSong()
    },
    // 删除
    deleteSong (id) {
      this.$confirm('是否删除歌曲', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '放弃'
      }).then(() => {
        this.$http.delete(`song/${id}`).then(res => {
          console.log(this.total % this.queryinfo.size)
          if (this.total % this.queryinfo.size === 1) {
            this.queryinfo.page = Math.floor(this.total / this.queryinfo.size)
            this.getSong()
          } else {
            this.getSong()
          }
          this.hite(res.data.code)
        })
      }).catch(action => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000
        })
      })
    },
    hite (code) {
      if (code === 10000) {
        this.$message.success({
          message: '成功',
          duration: 1000
        })
      } else {
        this.$message.error({
          message: '失败',
          duration: 1000
        })
      }
    },
    getSong () {
      this.$http.get(`song/${this.queryinfo.page}/${this.queryinfo.size}`, {
        params: {'query': this.queryinfo.query}
      }).then(res => {
        this.songs = res.data.data.rows
        this.total = res.data.data.total
        // this.queryinfo.page = 1
      })
    }
  },
  created () {
    this.getSong()
  }
}
</script>

<style scoped>
  .song-name {
    line-height: 90px;
  }
  .song-row{
    margin-top: 15px;
  }
  .song-tag{
    margin-left: 15px;
  }
</style>
